<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layui-container">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="id"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-form-label">邮箱</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="email"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <select name="status">
                        <option value="false">0</option>
                        <option value="true">1</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            </div>
        </div>
    </form>
        <div>
            <table class="layui-hide" id="users" lay-filter="userTable"></table>
        </div>
</div>

<%-- 添加用户界面 --%>
<div style="display: none" id="registDiv">
    <form class="layui-form" id="registForm">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="realName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="goAdd">添加</button>
            </div>
        </div>
    </form>
</div>

<%-- 修改小页面 --%>
<div style="display: none" id="updateDiv">
    <form class="layui-form" lay-filter="updateForm" id="updateForm">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID:</label>
            <div class="layui-input-inline">
                <input type="text" name="id" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input id="realName" type="text" name="realName" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="true">
                <input type="radio" name="status" value="0" title="false">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="goUpdate">修改</button>
            </div>
        </div>
    </form>
</div>


<script type="text/javascript">
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        form = layui.form;
        var $=layui.jquery;
        form.render();
        //查询
        form.on('submit(formDemo)',function (obj) {
         var data =obj.field;
         table.reload('users',{
             where:data,
             page:{curr:1}
         });
         return false;
        });

        //删除&添加
        table.on('toolbar(userTable)',function (obj) {
            var layEvent = obj.event;

            //删除用户
            if(layEvent == "del"){
                var checkStatus = table.checkStatus("users");
                var data = checkStatus.data;
                var ids = [];
                for(var i=0; i< data.length;i++){
                    ids[i] = data[i].id;
                }
                $.ajax({
                   url:"${pageContext.request.contextPath}/admin/del",
                   data:"ids="+ids,
                   success:function (ret) {
                       if (ret>0){
                           layer.msg("删除成功");
                           table.reload('users',{
                               page:{curr:1}
                           })
                       }
                       else {
                           layer.msg("删除失败");
                       }
                   }
                });

            }

            //添加用户
            if(layEvent == "add"){
                registIndex = layer.open({
                    type:1,
                    content:layui.jquery("#registDiv"),
                    shade:false,
                    resize:false
                });


            }

        });
        
        //添加用户
        form.on('submit(goAdd)', function(data) {
            $.ajax({
                url:"${pageContext.request.contextPath}/admin/add",
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(data.field),
                success:function (ret) {
                    if (ret>0){
                        layer.msg("添加成功");
                        layer.close(registIndex);
                        table.reload('users',{
                            page:{curr:1}
                        })
                    }else {
                        layer.msg("添加失败");
                    }

                }
            });

        });

        //更新用户
        table.on('tool(userTable)',function (obj) {
            var layEvent = obj.event;
            var data = obj.data;
            if(layEvent == "update"){
                form.val("updateForm",data);
                updateIndex = layer.open({
                    type:1,
                    content:layui.jquery("#updateDiv"),
                    shade:false,
                    resize:false
                });
            }
        });

        //更新用户
        form.on('submit(goUpdate)', function (data) {
            var id = data.field.id;
            if(data.field.status == "1"){
                data.field.status = "true";
            }else {
                data.field.status = "false";
            }

            $.ajax({
                url:"${pageContext.request.contextPath}/admin/update",
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(data.field),
                success:function (ret) {
                    console.log(ret);
                    if(ret>0){
                        layer.msg("更新成功");
                        layer.close(updateIndex);
                        table.reload('users',{
                            page:{curr:1}
                        });
                    }else{
                        layer.msg("更新失败");
                    }

                }
            })
            return false;
        });

        table.render({
            elem: '#users'
            ,url:'${pageContext.request.contextPath}/admin/table'
            ,toolbar: '#toolbardemo'

            ,cols: [[
                {type:'checkbox'}
                ,{field:'id',  title: 'ID', sort: true}
                ,{field:'email',  title: '邮箱'}
                ,{field:'password',  title: '密码', sort: true}
                ,{field:'realName',  title: '真实姓名'}
                ,{field:'status', title: '状态'}
                ,{field:'experience', title: '操作', toolbar:'#bardemo'}

            ]]
            ,page: true
            ,limit:5
            ,limits:[2,3,5,10],

        });
    });
</script>
<script type="text/html" id="bardemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">授权</button>
    </div>
</script>
<script type="text/html" id="toolbardemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>

    </div>
</script>
